<template>
  <div>
      <my-nvaigation-bar></my-nvaigation-bar>
      <div id="Glxt_containner">
          <el-row>
              <el-col :span="24" id="Glxt_bigtitle">花朵管理homeFlower</el-col>
          </el-row>

          <el-row style="margin-top: 20px;">
            <el-col :span="3" offset="2"><el-button type="primary" icon="el-icon-circle-plus-outline" @click="addFlower()">添加花朵</el-button></el-col>
            <el-col :span="16">
              <!--查询表单-->
              <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="名字">
                  <el-input v-model="searchObj.flowerName" placeholder="花朵的名字" /> 
              </el-form-item>
              <el-form-item label="详情">
                  <el-input v-model="searchObj.details" placeholder="花朵的详情" /> 
              </el-form-item>
              <el-form-item label="植物分类">
                  <el-select v-model="searchObj.family" placeholder="请选择植物分类">
                      <el-option
                      v-for="family in familyList"
                      :key="family.id"
                      
                      :label="family.familyName"
                      :value="family.id"
                      ></el-option>
                  </el-select>
              </el-form-item>
              <!--这个单选框↑，使用完v-for要空一行，要不的话会有红色的>，然后下面的代码都加粗了，不知道为什么-->
              <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
              <el-button type="default" @click="resetData()">清空</el-button>
              </el-form>
            </el-col>
          </el-row>
          
          
          <!--表格-->
          <el-table :data="list" style="width: 100%">
              <el-table-column prop="id" label="ID"></el-table-column>
              <el-table-column prop="flowerName" label="名称"></el-table-column>
              <el-table-column prop="pic" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.pic" style="width: 44px; height: 33px;"/>
                </template>
              </el-table-column>
              <el-table-column prop="details" label="详情"></el-table-column>
              <el-table-column prop="conserve" label="养护"></el-table-column>
              <el-table-column label="植物分类">
                  <template slot-scope="scope">
                      <el-tag>{{getFamilyById(scope.row.family)}}</el-tag>
                  </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column prop="updateTime" label="修改时间"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                      <el-button @click="editClick(scope.row.id)" type="text" size="small">编辑</el-button>
                      <el-button type="text" size="small" @click="deleteClick(scope.row.id)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>

          <!--页码-->
          <el-row>
              <el-col :span="24"><el-pagination background layout="prev, pager, next" :total="total" :current-page="page" @current-change="changeCurrentPage"></el-pagination></el-col>
          </el-row>

          <!--编辑-->
          <el-drawer
          title="编辑花朵信息"
          :visible.sync="drawer"
          with-header=true
          :before-close="handleClose">
          <div style="padding:30px">
              <el-form ref="editFlower" :model="form" label-width="60px">
                  <el-form-item label="ID">
                      <el-input v-model="editFlower.id" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="名字">
                      <el-input v-model="editFlower.flowerName"></el-input>
                  </el-form-item>
                  <el-form-item label="图片">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/post/postInfo/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                  <el-form-item label="详情">
                      <el-input v-model="editFlower.details"></el-input>
                  </el-form-item>
                  <el-form-item label="植物分类">
                      <el-select v-model="editFlower.family" placeholder="请选择植物分类">
                          <el-option
                          v-for="family in familyList"
                          :key="family.id"

                          :label="family.familyName"
                          :value="family.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="养护">
                      <el-input v-model="editFlower.conserve"></el-input>
                  </el-form-item>
                  <div style="margin-top: 10px;">
                      <el-button type="primary" @click="onSubmit">完成</el-button>
                  </div>                    
              </el-form>
          </div>
          </el-drawer>

          <!--添加-->
          <el-drawer
            title="添加花朵信息"
            :visible.sync="drawerWithAdd"
            with-header=true
            :before-close="handleCloseWithAdd">
            <div style="padding:30px">
                <el-form ref="saveObj" :model="form" label-width="60px">
                    <el-form-item label="名字">
                        <el-input v-model="saveObj.flowerName"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload class="avatar-uploader"
                                action= "http://localhost:8333/home/homeFlower/upload"
                                :show-file-list="false"
                                :on-success="handleSuccess"
                                ref="upload">
                            <img v-if="img" :src="img" class="image"/>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="详情">
                        <el-input v-model="saveObj.details"></el-input>
                    </el-form-item>
                    <el-form-item label="养护">
                        <el-input v-model="saveObj.conserve"></el-input>
                    </el-form-item>
                    <el-form-item label="植物分类">
                      <el-select v-model="saveObj.family" placeholder="请选择植物分类">
                          <el-option
                          v-for="family in familyList"
                          :key="family.id"

                          :label="family.familyName"
                          :value="family.id">
                          </el-option>
                      </el-select>
                  </el-form-item>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" @click="onSubmitWithSave">完成</el-button>
                    </div>                    
                </el-form>
            </div>
            </el-drawer>
      </div>
  </div>
</template>

<script>
import MyNvaigationBar from '../../components/MyNvaigationBar.vue';
import HomeFamilyApi from '../../api/home/homeFamily.js'
import HomeFlowerApi from '../../api/home/homeFlower.js'

export default {
components: { MyNvaigationBar },
data() {
  return {
      list: [], // homeflower列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      searchObj: {}, // 查询条件
      saveObj: {},//新增obj
      familyList: [],// 植物分类列表
      drawer: false,
      editFlower: {}, //修改花朵信息的内容
      drawerWithAdd: false, //添加窗口
      img: ''
  }
},
methods: {
    handleSuccess (response, file, fileList) {
            console.log(response)
              this.saveObj.pic = `http://localhost:8333/home/homeFlower/download?name=${response.data}`
              this.editFlower.pic = `http://localhost:8333/home/homeFlower/download?name=${response.data}`
              this.img = this.saveObj.pic
              console.log(this.saveObj.pic)
          },
  //添加新的花朵
  onSubmitWithSave() {
    this.$confirm('你确定要添加新的花朵吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            return HomeFlowerApi.addFlower(this.saveObj)
        }).then((res) => {
            if (res.data.code == 200) {
                this.$message.success(res.data.message)
                this.fetchData()
                this.drawerWithAdd = false
                this.saveObj = {}
            } else {
                this.$message.error(res.data.message);
            }
        }).catch(err => {
            if (err === 'cancel') {
                this.$message.info('取消添加')
            }
        })
    },
  //编辑信息关闭提醒（添加）
  handleCloseWithAdd(done) {
    this.$confirm('确定退出编辑花朵信息？')
        .then(_ => {
            this.saveObj = {}
            done();
        })
        .catch(_ => {});
    },
  //添加花朵信息
  addFlower() {
    this.drawerWithAdd = true;
    this.img = ''
  },
   //修改花朵信息
   onSubmit() {
          this.$confirm('你确定要更改植物信息吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              return HomeFlowerApi.updateFlower(this.editFlower)
          }).then((res) => {
              if (res.data.code == 200) {
                  this.$message.success(res.data.message)
                  this.fetchData()
                  this.drawer = false
              } else {
                  this.$message.error(res.data.message);
              }
          }).catch(err => {
              if (err === 'cancel') {
                  this.$message.info('取消编辑')
              }
          })
      },
  //删除花朵
  deleteClick(id) {
          this.$confirm('你确定要删除'+id+'号植物吗','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              return HomeFlowerApi.remove(id)
          }).then((res) => {
              this.fetchData()
              this.$message.info(res.data.message)
          }).catch(err => {
              if (err === 'cancel') {
                  this.$message.info('取消删除')
              }
          })  
      },
  // 改变页码，page：回调参数，表示当前选中的“页码”
  changeCurrentPage(page) {
          this.page = page
          this.fetchData()
      },
  //编辑信息
  editClick(id) {
          this.drawer = true;
          HomeFlowerApi.getFlowerById(id)
          .then(res => {
              this.editFlower = res.data.data
              this.img = this.editFlower.pic
              console.log(this.editFlower)
          })
      },
  // 重置表单
  resetData() {
          this.searchObj = {}
          this.fetchData()
      },
  //编辑信息关闭提醒
  handleClose(done) {
      this.$confirm('确定退出编辑植物信息？')
        .then(_ => {
          done();
          this.img = ''
        })
        .catch(_ => {});
      },
  //获取所有植物分类
  getAllFamily() {
      HomeFamilyApi.getAllFamily()
      .then(res => {
          this.familyList = res.data.data
          console.log(this.familyList)
      })
  },
  //数据初始化
  fetchData() {
    HomeFlowerApi.pageList(this.page, this.limit, this.searchObj)
      .then(res => {
          this.list = res.data.data.records
          this.total = res.data.data.total
      })
  },
},
computed: {
  //跟据id获取family
  getFamilyById() {
      return id => {
          const item = this.familyList.find(item => item.id == id)
          return item ? item.familyName : ''
      }
  },
},
created() {
  this.getAllFamily(),
  this.fetchData()
}
}

</script>

<style>
  #Glxt_containner{
      width: auto;
      height: auto;
      border:3px dashed #42b983;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 8px;
      margin-top: 10px;
  }

  #Glxt_bigtitle {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bolder;
  color:#42b983;
  }

  .image{
    width: 100%;
    height: 324px;
}

</style>